<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="Author" content="李艺江">
<title>答题</title>
<style>
html, body {
	width: 100%;
	height: 100%;
	margin: 0;
}

a {
	text-decoration: none;
	padding-left: 2px
}

.container {
	position: relative;
	width: 100%;
	height: 100%;
}

.header {
	position: relative;
	width: 100%;
	height: 12%;
	background-color: #66CC00;
}

hr {
	height: 2%;
	border: none;
	background-color: #FFFFFF;
}

.content {
	position: relative;
	width: 100%;
	height: 68%;
}

.content-left {
	width: 15%;
	height: 600px;
	float: left;
	background-color: #66CC00;
}

.content-right {
	width: 85%;
	height: 600px;
	float: left;
	background: url(image/background.jpg);
}

.title {
	text-align: center;
}

.title font {
	font-size: 40px;
}

.user {
	text-align: right;
}

.user font {
	font-size: 20px;
}

.content-left div {
	width: 90%;
	background-color: #FFFFFF;
}

.content-left div li {
	height: 25px;
	background-color: #FFFFFF;
}

.timing {
	height: 100px;
	text-align: center;
	color: red;
	font-size: 30px;
}

.table {
	width: 100%;
	padding-left: 1%;
}

.table table {
	border-collapse: collapse;
	background-color: #FFFFFF
}

.col1, .col7 {
	border: solid #66CC00;
	border-width: 2px;
	width: 100px;
	text-align: center;
}

.col2, .col8 {
	border: solid #66CC00;
	border-width: 2px;
	width: 280px;
	text-align: center;
}

.col3, .col4, .col5, .col6 {
	border: solid #66CC00;
	border-width: 2px;
	width: 100px;
	text-align: center;
}

.btn {
	text-align: center
}
</style>
<script type="text/javascript">
    var surveyTime = "${requestScope.questionnaire.surveyTime }";
	var maxtime = surveyTime * 60;  
	function CountDown() {
		if (maxtime >= 0) {
			minutes = Math.floor(maxtime / 60);
			seconds = Math.floor(maxtime % 60);
			msg = "剩余时间：" + minutes + "分" + seconds + "秒";
			document.all["timer"].innerHTML = msg;
			--maxtime;
		} else {
			clearInterval(timer);
			document.getElementById('btn').style.display = "none";
		}
	}
	timer = setInterval("CountDown()", 1000);
</script>
</head>
<body>
	<div class=container>
		<div class="header">
			<div class="title">
				<br /> <font>问卷调研管理系统</font>
			</div>
			<div class="user">
				<font>欢迎您:${sessionScope.user.name }&nbsp;&nbsp;</font>
			</div>
		</div>
		<div class="divide"></div>
		<div class="content">
			<div class="content-left">
				<ul>
					<li>调查课题管理
						<div>
							<ul>
								<li><a href="user_queryQuestuinnaires.action">调查课题查询</a></li>
							</ul>
						</div>
					</li>
					<li>个人信息管理
						<div>
							<ul>
								<li><a href="user_manageAll.action">个人信息管理</a></li>
							</ul>
						</div>
					</li>
					<li>留言板
						<div>
							<ul>
								<li><a href="user_send.action?pg=lm">我要留言</a></li>
							</ul>
						</div>
					</li>
					<li>修改个人密码
						<div>
							<ul>
								<li><a href="user_send.action?pg=cp">修改个人密码</a></li>
							</ul>
						</div>
					</li>
					<li>退出登录
						<div>
							<ul>
								<li><a href="login_logout.action">退出登录</a></li>
							</ul>
						</div>
					</li>
				</ul>
			</div>
			<div class="content-right">
				<br />
				<div class="timing">
					<font>
					      调查时间：${requestScope.questionnaire.surveyTime }分钟
					 </font>
					 <br /> 
					 <font>
					       调查课题：${requestScope.questionnaire.title }
					 </font>
					 <br /> 
					 <font id="timer"></font>
				</div>
				<br />
			  <form action="user_answerQuestions.action" method="post">
			    <input type="hidden" name="qnid" value="${requestScope.questionnaire.id }">
				<div class="table">
					<table id="blocks">
						<tr>
							<th class="col1">序号</th>
							<th class="col2">问题</th>
							<th class="col4">A选项</th>
							<th class="col5">B选项</th>
							<th class="col6">C选项</th>
							<th class="col7">D选项</th>
							<th class="col3">问题类型</th>
							<th class="col8">选择</th>
						</tr>
						<c:forEach items="${requestScope.questionnaire.questions }" var="question" varStatus="q">
						  <tr>
							<td class="col1">
							    第${q.index+1 }题
							  <input type="hidden" name="qid${q.index+1 }" value="${question.id }">
							  <input type="hidden" name="type${q.index+1 }" value="${question.type }">
							</td>
							<td class="col2">${question.content }</td>
							<td class="col3">${question.optionA.content }</td>
							<td class="col4">${question.optionB.content }</td>
							<td class="col5">${question.optionC.content }</td>
							<td class="col6">${question.optionD.content }</td>
							<c:choose>
							  <c:when test="${question.type eq 1 }">
							    <td class="col7">单选</td>
							    <td class="col8">
							      A:<input type="radio" name="oid${q.index+1 }" value="${question.optionA.id }">
								  B:<input type="radio" name="oid${q.index+1 }" value="${question.optionB.id }">
								  C:<input type="radio" name="oid${q.index+1 }" value="${question.optionC.id }">
								  D:<input type="radio" name="oid${q.index+1 }" value="${question.optionD.id }">
							    </td>
							  </c:when>
							  <c:otherwise>
							    <td class="col7">多选</td>
							    <td class="col8">
							      A:<input type="checkbox" name="oid${q.index+1 }" value="${question.optionA.id }"> 
								  B:<input type="checkbox" name="oid${q.index+1 }" value="${question.optionB.id }"> 
								  C:<input type="checkbox" name="oid${q.index+1 }" value="${question.optionC.id }">
								  D:<input type="checkbox" name="oid${q.index+1 }" value="${question.optionD.id }">
							    </td>
							  </c:otherwise>
							</c:choose>
						  </tr>
						</c:forEach>
					</table>
				</div>
				<br />
				<br />
				<div class="btn" id="btn">
					<input type="submit" name="提交">
				</div>
			  </form>
			</div>
		</div>
	</div>
</body>
</html>